$('#image').cropper({
    // 纵横比(宽高比)
    aspectRatio: 1, // 正方形
    // 指定预览区域
    preview: '.img-preview' // 指定预览区的类名（选择器）
});

$(".shang").on("click", function() {
    $("#file").click();
});

$("#file").change(function() {

    var obj = this.files[0];

    //    2.把选择的图片对象生成一个临时的url
    //    URL：JS语法内置构造函数。和Object  Array 一样都是构造函数
    var url = URL.createObjectURL(obj);

    //    3.结合插件：把图片地址进行替换；查文档；
    $('#image').cropper("replace", url);


});

var layer = layui.layer;

$(".sure").on("click", function() {
    // 1.cropper插件：配置，返回canvas对象；有个方法就可以把当前图片转换为base64格式，得到超长字符串
    var canvas = $('#image').cropper('getCroppedCanvas', {
        width: 100,
        height: 100
    });
    var base64 = canvas.toDataURL('image/png');


    // 2.提交数据
    $.ajax({
        url: "/my/update/avatar",
        type: "POST",
        data: {
            avatar: base64
        },
        success: function(res) {
            // 设计：头像提交成功：调用index主页面 重新加载信息
            layer.msg(res.message);

            if (res.status == 0) {
                window.parent.getInfo();
            }
        }
    })

});